import React, { useEffect, useState } from 'react';
import { Table, Input, Switch, Button, Form } from 'antd';

export default Form.create()(() => {
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      key: 'name',
      render: (text) => <a>{text || '暂未配置'}</a>,
    },
    {
      title: '是否对接',
      key: 'action',
      render: (text, record) => {
        return (
          <Switch
            onChange={(checked) => onChangeSwitch(checked, record, text)}
          />
        );
      },
    },
    {
      title: '接口地址(测试环境)',
      dataIndex: 'testUrl',
      key: 'testUrl',
      render: (text, record) => {
        let testUrlVal = formData.find(
          (item) => item.key == record.key
        )?.testUrl;
        return record.access ? (
          <Input
            value={testUrlVal ? testUrlVal : text}
            onChange={(e) => testUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
    {
      title: '接口地址 (生产环境)',
      dataIndex: 'prdUrl',
      key: 'prdUrl',
      render: (text, record) => {
        let prdUrlVal = formData.find((item) => item.key == record.key)?.prdUrl;
        // console.log(prdUrlVal);
        return record.access ? (
          <Input
            value={prdUrlVal ? prdUrlVal : text}
            onChange={(e) => proUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
  ];
  const [tableData, setTableData] = useState([
    {
      key: '1',
      apiName: '订单信息同步',
      testUrl: 32,
      prdUrl: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      apiName: '司机实时位置推送',
      testUrl: 42,
      prdUrl: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      apiName: '支付状态同步',
      testUrl: 32,
      prdUrl: 'arwaad. 1 Lake Park',
    },
  ]);
  const [formData, setFormData] = useState([]);

  let onChangeSwitch = (checked, record, text) => {
    console.log('开');
    let currentData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        currentData.push({ ...f, access: checked });
      } else {
        currentData.push(f);
      }
    });
    console.log('currentData', currentData);
    setTableData(currentData);
    if (!checked) {
      let val = tableData.map((f) => {
        if (f.key === record.key) {
          return {
            key: f.key,
            testUrl: '',
            prdUrl: '',
            access:checked
          };
        } else {
          return {
            key: f.key,
            testUrl: '',
            prdUrl:
              formData.length > 0
                ? formData.find((item) => item.key == f.key).prdUrl
                : '',
            ...(formData.length > 0 &&
              formData.find((item) => item.key == f.key)),
          };
        }
      });

      console.log('关', val);
      setFormData(val);
    }
  };

  let testUrlChange = (e, text, record) => {
    let testUrlData = tableData.map((f) => {
      if (f.key === record.key) {
        return {
          key: f.key,
          testUrl: e.target.value,
          prdUrl:
            formData.length > 0
              ? formData.find((item) => item.key == f.key).prdUrl
              : '',
        };
      } else {
        return {
          key: f.key,
          testUrl: '',
          prdUrl:
            formData.length > 0
              ? formData.find((item) => item.key == f.key).prdUrl
              : '',
          ...(formData.length > 0 &&
            formData.find((item) => item.key == f.key)),
        };
      }
    });
    // console.log(testUrlData);
    setFormData(testUrlData);
  };
  let proUrlChange = (e, text, record) => {
    let proUrlData = tableData.map((f) => {
      if (f.key === record.key) {
        return {
          key: f.key,
          prdUrl: e.target.value,
          testUrl:
            formData.length > 0
              ? formData.find((item) => item.key == f.key).testUrl
              : '',
        };
      } else {
        return {
          key: f.key,
          prdUrl: '',
          testUrl:
            formData.length > 0
              ? formData.find((item) => item.key == f.key).testUrl
              : '',
          ...(formData.length > 0 &&
            formData.find((item) => item.key == f.key)),
        };
      }
    });
    setFormData(proUrlData);
  };
  // console.log(formData);
  // console.log(tableData);

  let save = () => {
    console.log(formData);
  };
  useEffect(() => {}, []);
  return (
    <div>
      <h2>Table2</h2>
      <Table columns={columns} dataSource={tableData} />
      <Button type="danger" onClick={save}>
        保存
      </Button>
    </div>
  );
});
